<template>
  <el-card header="待办事项" shadow="naver">
    <el-row>
      <el-col :xl="12">
        <div class="icon__group">
          <todoBtn class-name="success el-icon-s-check" to="/adminCenter/data-up" :num="waitExampleArchiveCount" text="稿件审核" />
          <todoBtn class-name="warning el-icon-warning" to="/adminCenter/data-up" :num="12" text="举报受理" />
        </div>
      </el-col>
      <el-col :xl="12">
        <todoList />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import todoList from './TodoList/index.vue';

export default {
    name: 'DashboardToDo',
    components: {
        todoList,
        todoBtn: {
            props: ['to', 'num', 'text', 'className'],
            render() {
                return (
                    <router-link to={this.to}>
                        <el-badge value={this.num} class="btn__group">
                            <i class={['btn-icon__item', this.className]} />
                            <span class="btn-text__item">{this.text}</span>
                        </el-badge>
                    </router-link>
                );
            },
        },
    },
    props: {
        waitExampleArchiveCount: {
            type: Number,
            default: 0,
        },
    },
};
</script>

<style lang="scss" >
$itemSize: 60px;

.icon__group {
  position: relative;
  z-index: 2;
}
.btn__group {
  display: inline-block;
  width: $itemSize;
  height: $itemSize + 20;
  margin: 10px;
  text-align: center;
  font-size: 12px;
}
.btn-icon__item {
  width: $itemSize;
  height: $itemSize;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: $itemSize - 20;
  color: #fff;
  background-color: #aaa;
}
.btn-text__item {
  height: 20px;
  display: inline-block;
}
</style>
